<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>语法树展示网页(仅对编译无问题时产生的结果负责)</title>
</head>
<body>
    <div id="container"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
    <script>
        function demo(data) {
            const container = document.getElementById('container');
            const width = 4000;
            const height = 2000;
            const graph = new G6.TreeGraph({
                container: 'container', // 指定挂载容器
                width,
                height,
                linkCenter: true,
                defaultNode: {
                    size: 26,
                    anchorPoints: [
                        [0, 0.5],
                        [1, 0.5],
                    ],
                },
                defaultEdge: {
                    type: 'cubic-vertical',
                },
                layout: {
                    type: 'compactBox',
                    direction: 'TB', // H / V / LR / RL / TB / BT
                    nodeSep: 40,
                    rankSep: 100,
                },
            });

            graph.node(function (node) {
                let position = 'right';
                let rotate = 0;
                let fill = 'gray';
                if (node.style) {
                    
                    fill = '#8ce183';
                }
                return {
                    label: node.label,
                    labelCfg: {
                        position,
                        offset: 5,
                        style: {
                            rotate,
                            fill,
                            textAlign: 'start',
                        },
                    },
                };
            });

            graph.data(data);
            graph.render();
            graph.fitView();
        }
    </script>
    <script src="./jsonOut.json?callback=demo"></script>
</body>
</html>